{% comment %}
#    This file is part of OpenPolitik.
#
#    OpenPolitik is free software: you can redistribute it and/or modify
#    it under the terms of the GNU General Public License as published by
#    the Free Software Foundation, either version 3 of the License, or
#    (at your option) any later version.
#
#    OpenPolitik is distributed in the hope that it will be useful,
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#    GNU General Public License for more details.
#
#    You should have received a copy of the GNU General Public License
#    along with OpenPolitik.  If not, see <http://www.gnu.org/licenses/>.
{% endcomment %}
{% extends "layout.html" %}

{% block content %}
<script type = "text/javascript">
var num_replies = 0;
var div_class = "{% if messages|length|divisibleby:2 %}light{% else %}dark{% endif %}";
function sendReply(){
	var content = $("msg_content").value;
	var subject = $("subject").value;
	$("subject").value = "";
	$("msg_content").value = "";
	$("replyBox").style.display = "none";

	$("message").innerHTML = "Sending...";

	new Ajax.Request("/send_reply", {
		parameters: {subject: subject, content: content, to: "{{ other.email }}", orig: "{{ orig.key }}", game: "{{ orig.game.key }}"},
		onSuccess: function(response){
			$("newMessages").innerHTML += "<div id = \"title_" + num_replies + "\" class = \"" +
				div_class + "\"><a href = \"#\" onclick = \"$(content_" + num_replies + ").toggle(); return false\">" +
				subject + " - <i>{{ liu.nickname}}</i></a></div><div id = \"content_" + num_replies + "\">" + content.replace(/\n/g, "<br />") + "</div>";
			
			num_replies++;
			div_class = (div_class == "dark" ? "light" : "dark");
			$("message").innerHTML = "";
		}
	});
}
</script>
Conversation between {{ liu.nickname }} and {{ other.nickname }}{% if other_nation %} ( {{ other_nation }} ){% endif %}:<br /><br />
<div style = "border-bottom: 1px dashed #333; width: 500px; padding-bottom: 5px;">
	{% for m in messages %}
		<div id = "title_{{ m.key }}" class = "{% cycle light,dark %}">
			<a href = "#" onclick = "$('content_{{ m.key }}').toggle(); return false">{{ m.subject }} - <i>{{ m.sender.nickname }}</i></a>
		</div>
		<div id = "content_{{ m.key }}" {% ifnotequal m.key message.key %}style = "display: none"{% endifnotequal %}>{{ m.content }}</div>
	{% endfor %}
	<div id = "newMessages"></div>
	<div id = "message"></div>
	{% if old_messages %}
		<br />
		<i>You have older messages. <a href = "#" onclick = "$('old_msgs').toggle(); return false">See them</a></i><br /><br />
		<div id = "old_msgs" style = "display: none">
			{% for om in old_messages %}
				<div id = "title_{{ om.key }}" class = "{% cycle light,dark %}">
					<a href = "#" onclick = "$('content_{{ om.key }}').toggle(); return false">{{ om.subject }} - <i>{{ om.sender.nickname }}</i></a>
				</div>
				<div id = "content_{{ om.key }}" style = "display: none">{{ om.content }}</div>
			{% endfor %}
			<a href = "#" onclick = "$('old_msgs').style.display = 'none'; return false">Hide</a><br />
			<br />
		</div>
	{% endif %}
</div>
<a href = "#" onclick = "$('replyBox').style.display = 'block'; return false">Reply</a>
<br />
<div id = "replyBox" style = "display: none">
	Subject: <input id = "subject" value = "Re: {{ orig.subject}}" /><br />
	<textarea id = "msg_content" cols = "60" rows = "20"></textarea><br />
	<input type = "button" value = "Send" onclick = "sendReply()" />
</div>
<br />
<a href = "/game?game={{ message.game.key }}">Back to {{ message.game.name }}</a>
{% endblock %}
